<template>
  <div class="assistant-left bg-cf">
    <div class="header">
      <img
        src="@/assets/img/icon/assistant/assistant-138.svg"
        alt=""
        class="mr-6"
      />
      <span>请选择您的助理</span>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :height="848"
      row-class-name="text-center"
    >
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="80"
      ></el-table-column>
      <el-table-column prop="date" label="姓名" />
      <el-table-column prop="name" label="申请时间" />
      <el-table-column label="删除&确定">
        <template #default>
          <el-button round size="medium">删除</el-button>
          <el-button round type="primary" size="medium">确定</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination"
      background
      layout="prev, pager, next"
      :total="1000"
    >
    </el-pagination>
  </div>
</template>

<script>
// import {ref} from 'vue'
export default {
  name: 'App',
  setup() {
    return {
      tableData: [
        {
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        },
        {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        },
        {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          slotName: 'handle'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.assistant-left {
  border-radius: 16px 16px 0px 0px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);

  overflow: hidden;
  .header {
    padding: 16px 30px;
    background: #679aff;
    font-size: 26px;
    color: #ffffff;
    img {
      width: 30px;
      height: 30px;
      vertical-align: middle;
    }
  }
  .pagination {
    padding: 13px 0;
    text-align: center;
  }
}
thead {
  border: none;
}
:deep(.el-table td, .el-table th.is-leaf) {
  border-bottom: none;
}
:deep(.el-table th > .cell) {
  text-align: center;
}
:deep(.el-table .cell) {
  text-align: center;
}
</style>
